<template>
    <div>
        <a-spin :spinning="spinning">
            <a-form :layout="formLayout" :form="form">
                <a-form-item label="父级分类" v-bind="formItemLayout" v-if="parent!=null && parent.id!=null">
                    {{parent.name}}
                </a-form-item>
                <a-form-item label="分类名称" v-bind="formItemLayout">
                    <a-input placeholder="请输入分类名称" v-decorator="['name',{rules: [{ required: true, message: '分类名称不能为空!' }]}]" style="width: 100%;"/>
                </a-form-item>
                <a-form-item label="备注" v-bind="formItemLayout">
                    <a-textarea :autosize="{ minRows: 4, maxRows: 8 }" placeholder="请输入备注" v-decorator="['remark']" style="width: 100%;" />
                </a-form-item>
                <a-form-item :wrapperCol="{span:14,offset: 5}">
                    <a-button type='primary' :loading="bntLoading" @click="onSubmit">保 存</a-button>
                </a-form-item>
            </a-form>
        </a-spin>
    </div>
</template>
<script>
    import {save} from "../../../api/goodsType";
    import ATextarea from "ant-design-vue/es/input/TextArea";
    export default {
        components: {ATextarea},
        beforeCreate(){
            this.form = this.$form.createForm(this);
        },
        props:{
            model:{
                type:Object,
                default:null
            },
            parent:{
                type:Object,
                default:null
            },
        },
        data() {
            return{
                formLayout:'horizontal',
                spinning:false,
                bntLoading:false
            }
        },
        computed: {
            formItemLayout () {
                const { formLayout } = this
                return formLayout === 'horizontal' ? {
                    labelCol: { span:5},
                    wrapperCol: { span:16 },
                } : {}
            },
        },
        methods:{
            onSubmit(){
                this.bntLoading = true;
                this.form.validateFields(
                    (err,values) => {
                        if (!err) {
                            console.log("==values",values);
                            this.onSave(values);
                        }else{
                            this.bntLoading = false;
                        }
                    },
                )
            },
            async onSave(data){
                this.spinning = true;
                let form = {type:'UN_DEPOSIT',parentId:0}
                if(this.parent != null){
                    form.parentId = this.parent.id
                    form.type = 'DEPOSIT'
                }
                if(this.model != null){
                    form = {...this.model}
                }
                form = Object.assign(form,data)
                let resp = await save(form);
                this.spinning = false;
                let _this = this;
                if(this.qUtil.validResp(resp)){
                    this.$emit("onCancel",false);
                }else{
                    this.bntLoading = false;
                }
            },
            async onLoad(){
                if(this.model != null){
                    const {name,remark} = this.model;
                    this.form.setFieldsValue({name,remark});
                }
            }
        },
        mounted(){
            this.onLoad();
        },
    }
</script>